<template>
  <el-aside width="200px" style="background-color: #fff;">
    <el-menu default-active="1-1" @select="selectIndex">
      <!-- 员工子菜单 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">员工</span>
        </template>

        <el-menu-item index="1-1">
          <span slot="title">员工表</span>
        </el-menu-item>
        <el-menu-item index="1-2">
          <span slot="title">员工添加</span>
        </el-menu-item>
      </el-submenu>

      <!-- 部门子菜单 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">部门</span>
        </template>

        <el-menu-item index="2-1">
          <span slot="title">部门表</span>
        </el-menu-item>
        <el-menu-item index="2-2">
          <span slot="title">部门添加</span>
        </el-menu-item>
      </el-submenu>

      <!-- 合同子菜单 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span slot="title">合同</span>
        </template>

        <el-menu-item index="3-1">
          <span slot="title">合同表</span>
        </el-menu-item>
        <el-menu-item index="3-2">
          <span slot="title">合同添加</span>
        </el-menu-item>
      </el-submenu>

      <!-- 培训子菜单 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span slot="title">培训</span>
        </template>

        <el-menu-item index="4-1">
          <span slot="title">培训记录</span>
        </el-menu-item>
        <el-menu-item index="4-2">
          <span slot="title">培训记录添加</span>
        </el-menu-item>
      </el-submenu>

      <!-- 奖惩子菜单 -->
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-flag"></i>
          <span slot="title">奖惩</span>
        </template>

        <el-menu-item index="5-1">
          <span slot="title">奖惩记录</span>
        </el-menu-item>
        <el-menu-item index="5-2">
          <span slot="title">奖惩记录添加</span>
        </el-menu-item>
      </el-submenu>

      <!-- 工作子菜单 -->
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">工作变动</span>
        </template>

        <el-menu-item index="6-1">
          <span slot="title">工作变动记录</span>
        </el-menu-item>
        <el-menu-item index="6-2">
          <span slot="title">工作变动记录添加</span>
        </el-menu-item>
      </el-submenu>

      <!-- 职称子菜单 -->
      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-s-check"></i>
          <span slot="title">职称评定</span>
        </template>

        <el-menu-item index="7-1">
          <span slot="title">职称评定记录</span>
        </el-menu-item>
        <el-menu-item index="7-2">
          <span slot="title">职称评定记录添加</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'MenuHome',
  data() {
    return {}
  },

  methods: {
    selectIndex(index, path) {
      console.log(index.substr(2, 1))
      let info = {
        index: path[0],
        type: index.substr(2, 1)
      }
      this.$emit('menuClick', info)
    }
  }
}
</script>

<style scoped>
.el-menu {
  background-color: #fff;
}
</style>
